---
import type { MarkdownHeading } from "astro";
import { widgetManager } from "../../utils/widget-manager";
import Profile from "./Profile.astro";
import Announcement from "./Announcement.astro";
import Categories from "./Categories.astro";
import Tags from "./Tags.astro";
import TOC from "./TOC.astro";
import MusicPlayer from "./MusicPlayer.svelte";

interface Props {
	class?: string;
	headings?: MarkdownHeading[];
}

const { class: className, headings } = Astro.props;

// 获取配置的组件列表
const topComponents = widgetManager.getComponentsByPosition("top");
const stickyComponents = widgetManager.getComponentsByPosition("sticky");

// 组件映射表
const componentMap = {
	profile: Profile,
	announcement: Announcement,
	categories: Categories,
	tags: Tags,
	toc: TOC,
	"music-player": MusicPlayer,
};

// 渲染组件的辅助函数
function renderComponent(component: any, index: number, components: any[]) {
	const ComponentToRender = componentMap[component.type as keyof typeof componentMap];
	if (!ComponentToRender) return null;
	
	const componentClass = widgetManager.getComponentClass(component, index);
	const componentStyle = widgetManager.getComponentStyle(component, index);
	
	return {
		Component: ComponentToRender,
		props: {
			class: componentClass,
			style: componentStyle,
			headings: component.type === 'toc' ? headings : undefined,
			...component.customProps,
		}
	};
}
---

<div id="sidebar" class:list={[className, "w-full"]}>
	<!-- 顶部固定组件区域 -->
	{topComponents.length > 0 && (
		<div class="flex flex-col w-full gap-4 mb-4">
			{topComponents.map((component, index) => {
				const renderData = renderComponent(component, index, topComponents);
				if (!renderData) return null;
				
				const { Component, props } = renderData;
				return <Component {...props} />;
			})}
		</div>
	)}
	
	<!-- 粘性组件区域 -->
	{stickyComponents.length > 0 && (
		<div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
			{stickyComponents.map((component, index) => {
				const renderData = renderComponent(component, index, stickyComponents);
				if (!renderData) return null;
				
				const { Component, props } = renderData;
				return <Component {...props} />;
			})}
		</div>
	)}
</div>

<!-- 响应式样式和JavaScript -->
<style>
	/* 响应式断点样式 */
	@media (max-width: 768px) {
		#sidebar {
			display: var(--sidebar-mobile-display, block);
		}
	}
	
	@media (min-width: 769px) and (max-width: 1024px) {
		#sidebar {
			display: var(--sidebar-tablet-display, block);
		}
	}
	
	@media (min-width: 1025px) {
		#sidebar {
			display: var(--sidebar-desktop-display, block);
		}
	}
</style>

<script>
	import { widgetManager } from "../../utils/widget-manager";
	
	// 响应式布局管理
	class SidebarManager {
		constructor() {
			this.init();
		}
		
		init() {
			this.updateResponsiveDisplay();
			window.addEventListener('resize', () => this.updateResponsiveDisplay());
		}
		
		updateResponsiveDisplay() {
			const breakpoints = widgetManager.getBreakpoints();
			const width = window.innerWidth;
			
			let deviceType: 'mobile' | 'tablet' | 'desktop';
			if (width < breakpoints.mobile) {
				deviceType = 'mobile';
			} else if (width < breakpoints.tablet) {
				deviceType = 'tablet';
			} else {
				deviceType = 'desktop';
			}
			
			const shouldShow = widgetManager.shouldShowSidebar(deviceType);
			const sidebar = document.getElementById('sidebar');
			
			if (sidebar) {
				sidebar.style.setProperty(
					`--sidebar-${deviceType}-display`, 
					shouldShow ? 'block' : 'none'
				);
			}
		}
	}
	
	// 初始化侧边栏管理器
	new SidebarManager();
</script>
